<template>
	<view class="input-box ">
		<text class="title">{{title}}<text class="is-must" v-if="isMust"> * </text></text>
		<input :maxlength="maxlength" 
			:disabled="disable" 
			class="value" 
			:value="inputTxt" 
			:placeholder="'请输入'+title + otherTxt" 
			placeholder-style="font-size:13px; color:#aaa"
			@input="input" 
			:type="type" 
			@blur="blur" 
			@confirm="blur"></input>
		<text v-if="arrow" class="cell-more ayj-icon">&#xe6a2;</text>
		<text v-if="tip.length>0" class="tip">{{tip}}</text>
		<text v-if="creatTxt" class="tip creat-txt" @click="creatGdNo">{{creatTxt}}</text>
	</view>
</template>

<script>
	
	export default {
		props: {
			isMust:{
				type:Boolean,
				default:false
			},
			maxlength:{
				type:Number,
				default:-1
			},
			title:{
				type:String,
				default:''
			},
			value:{
				type:String,
				default:''
			},
			tip:{
				type:String,
				default:''
			},
			type:{
				type:String,
				default:'text'
			},
			arrow:{
				type:Boolean,
				default:false
			},
			disable:{
				type:Boolean,
				default:false
			},
			otherTxt:
			{
				type:String,
				default:''
			},
			
			creatTxt:
			{
				type:String,
				default:''
			}
		},
		
		watch:{
			value:
			{
				handler(newValue,oldVale)
				{
					this.inputTxt = newValue;
				}
			},
		},
		
		methods:{
			/***生成货号***/
			creatGdNo()
			{
				let time = new Date();
				let y = String(time.getFullYear()).substr(2,2);
				let moon = (time.getMonth() + 1) <= 9 ? "0"+ (time.getMonth() + 1) : (time.getMonth() + 1);
				let d = time.getDate() <= 9 ? "0" + time.getDate() : time.getDate();
				let h = time.getHours() <= 9 ? "0" + time.getHours() : time.getHours();
				let m = time.getMinutes() <= 9 ? "0" + time.getMinutes() : time.getMinutes();
				let s = time.getSeconds() <= 9 ? "0" + time.getSeconds() : time.getSeconds();
				this.inputTxt = String(y) + String(moon) + String(d) + String(h) + String(m) + String(s);
				this.blur();
			},
			
			input(e){
				this.inputTxt = e.detail.value;
				this.blur();
			},
			
			clear()
			{
				this.inputTxt = "";
			},
			
			blur(){
				this.$emit('input',this.inputTxt);
			},
			
			setBarcode(value)
			{
				this.inputTxt = value;
				this.blur();
			}
		},
		data() {
			return {
				inputTxt:this.value,
			};
		}
	}
</script>

<style lang="scss">
	.input-box{
		display: flex;
		background: white;
		border-radius: 2px;
		border-bottom: 1px solid #f2f2f2;
		padding: 5px 0px;
		color: black;
		align-items: center;
	}
	.title{
		width: 90px;
		font-size: 13px;
		.is-must
		{
			padding-left: 3px;
			color: red;
		}
	}
	.value{
		flex: 1;
		font-size: 15px;
		height: 30px;
		line-height: 30px;
	}
	.tip{
		font-size: 13px;
	}
	.creat-txt
	{
		color: #3388FF;
		cursor: pointer;
	}
	.creat-txt:hover
	{
		color: #2d78e1;
		cursor: pointer;
	}
	.group{
		border-bottom: none;
		margin-bottom: 10px;
	}
</style>
